<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li {
        list-style-type: none;
    }
</style>
<body>
    <!-- 第一题 -->
    <h1>第一题</h1>
    <ul>
        <li>子节点1</li>
        <li>子节点2</li>
    </ul>
    <button>子节点个数</button>
    <button>判断节点类型</button>
    <button>操作子节点</button>
    <h1>第二题</h1>
    <button>子节点个数</button>
    <button>操作子节点</button>
    <h1>第三题</h1>
    <button>查看隐藏的父节点</button>
    <button>显示被隐藏的父节点</button>
    <ul id="aa">
        <li>子节点1
            <span>隐藏</span>
        </li>
        <li>子节点2
            <span>隐藏</span>
        </li>
        <li>子节点3
            <span>隐藏</span>
        </li>
        <li>子节点4
            <span>隐藏</span>
        </li>
        <li>子节点5
            <span>隐藏</span>
        </li>
    </ul>
</body>
<script>
    window.onload = function(){
        // 第一题
        let buttons = document.getElementsByTagName('button');
        let uls = document.getElementsByTagName('ul');
        buttons[0].onclick = function(){
            alert('子节点个数' + uls[0].childNodes.length)
            // console.log(uls[0].childNodes)
        }
        buttons[1].onclick = function(){
            for (let i = 0; i < uls[0].childNodes.length; i++) {
                  alert('当前节点的nodeType是' + uls[0].childNodes[i].nodeType)
            }
        }
        buttons[2].onclick = function(){
            for (let i = 0; i < uls[0].childNodes.length; i++) {
                if (uls[0].childNodes[i].nodeType == 1) {
                    alert('我是' + uls[0].childNodes[i].childNodes[0].nodeValue);
                    console.log(uls[0].childNodes[i].childNodes[0].nodeValue)
                    
                }
            }
        }
        // 第二题
        buttons[3].onclick = function(){
            alert('子节点个数' + uls[0].children.length)
        }
        buttons[4].onclick = function(){
            for (let i = 0; i < uls[0].children.length; i++) {
                alert('我是' + uls[0].children[i].innerHTML);
                // console.log(uls[0].children[i].innerHTML)
            }
        }
        // 第三题
        let spans = document.getElementsByTagName('span');
        let aa = document.getElementById('aa').children;
        buttons[5].onclick = function(){
           for (let i = 0; i < aa.length; i++) {
               if (aa[i].style.display == 'none') {
                //    console.log('我被隐藏了' + aa[i].innerHTML)
                alert('我被隐藏了' + aa[i].innerHTML)
               }
           }
        }
        buttons[6].onclick = function(){
            for (let i = 0; i < aa.length; i++) {
                aa[i].style.display = 'block'
           }
        }
        for (let i = 0; i < spans.length; i++) {
            spans[i].onclick = function(){
               for (let j = 0; j < aa.length; j++) {
                  aa[i].style.display = 'none'
               }
            }
        }
        
    }
</script>
</html>